<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-right" @tap="toRegister">
				<view class="text">注册</view>
			</view>
		</view>
		<view class="logo">
			<image src="../../static/img/zchat.png"></image>
		</view>
		<view class="main">
			<view class="title">登录</view>
			<view class="inputs">
				<input type="text" v-model="user" @input="hideTip" placeholder="用户名/邮箱" placeholder-style="color:#aaa;font-weight:300;font-size:26rpx;">
				<input type="password" v-model="pwd" @input="hideTip" placeholder="密码" placeholder-style="color:#aaa;font-weight:300;font-size:26rpx;">
			</view>
			<view class="tips" v-if="tips">用户名或密码错误!</view>
			<view class="tips" v-if="tipsS">不能为空!</view>
		</view>
		<view class="submit" @tap="login">登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: '',
				pwd: '',
				//控制用户名或者密码错误提示
				tips: false,
				//控制用户名或者密码为空提示
				tipsS: false
			}
		},
		onLoad(e) {
			if (e.user) {
				this.user = e.user
			}
		},
		methods: {
			//跳转到注册页面
			toRegister: function() {
				uni.navigateTo({
					url: '../register/register'
				})
			},
			//隐藏tips
			hideTip() {
				this.tips = false
				this.tipsS = false
			},
			//登录
			login: function() {
				if (this.user && this.pwd) {
					uni.request({
						url: this.baseURL + '/login/match',
						data: {
							data: this.user,
							pwd: this.pwd
						},
						method: 'POST',
						success: (data) => {
							let status = data.data.status
							if (status === 200) {
								//登录成功
								let res = data.data.backVal
								//本地存储用户信息
								uni.setStorage({
									key: 'user',
									data: {
										'id': res.id,
										'name': res.name,
										'imgurl': res.imgurl,
										'token': res.token
									},
									success: function() {}
								})
								uni.navigateTo({
									url: '../index/index',
									success: function() {},
									fail: function() {}
									
								})
							} else if (status === 400) {
								//匹配失败
								this.tips = true
							} else if (status === 500) {
								uni.showToast({
									title: '服务器发生错误!',
									icon: 'none',
									duration: 2000
								})
							}
						}
					})
				}else{
					this.tipsS = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../commons/css/style.scss';

	.top-bar {
		justify-content: flex-end;

		.top-bar-right {
			padding-right: 32rpx;

		}
	}

	.logo {
		text-align: center;

		image {
			padding-top: 160rpx;
			width: 300rpx;
			height: 300rpx;
		}
	}

	.main {
		padding: 54rpx $uni-spacing-row-lg 120rpx;

		.title {
			font-size: 50rpx;
			font-weight: 600;
			color: $uni-text-color;
		}

		.inputs {
			padding-top: 8rpx;

			input {
				height: 88rpx;
				line-height: $uni-text-color;
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				font-weight: 500;
				border-bottom: 1px solid $uni-border-color;
			}
		}

		.tips {
			float: left;
			font-size: $uni-font-size-base;
			color: red;
			line-height: 56rpx;
		}
	}

	.submit {
		width: 520rpx;
		height: 96rpx;
		margin: 0 auto;
		background: #333333;
		border-radius: 48rpx;
		color: #FFFFFF;
		font-size: $uni-font-size-lg;
		font-weight: 600;
		line-height: 96rpx;
		text-align: center;
	}
</style>
